// - 弹窗展示 ：通过 el-dialog 组件实现弹窗功能，支持自定义标题和宽度。
// - 表单展示 ：通过 el-form 组件展示表单内容，支持通过 slot 插槽自定义表单字段。
// - 事件触发 ：
// - 通过 @update:model-value 监听弹窗的显示/隐藏状态变化，并将变化后的值通过 $emit 传递给父组件。
// - 通过 @click 监听“取消”和“保存”按钮的点击事件，并分别触发 cancel 和 save 事件。
<template>
  <el-dialog
    :model-value="visible"
    :title="title"
    width="40%"
    @update:model-value="(value) => $emit('update:visible', value)"
  >
    <el-form :model="formData" label-width="100px" label-position="left">
      <slot></slot>
    </el-form>
    <template #footer>
      <el-button @click="$emit('cancel')">取消</el-button>
      <el-button type="primary" @click="$emit('save')">保存</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    title: String,
    formData: Object
  }
};
</script>